<template>
    <div class="backGradient">
        <a-row class="leftBottomItem mBtoom">
            <a-radio-group class="selectClass" :value="type" @change="selectChange" :loading="loading" size="small"
                button-style="solid">
                <a-radio-button value="2">
                    日
                </a-radio-button>
                <a-radio-button value="0">
                    月
                </a-radio-button>
                <a-radio-button value="1">
                    年
                </a-radio-button>
            </a-radio-group>
            <a-col class="headTitle" :span="24">
                <HeadTitle :value="statiDataTitle[fromType].title" :extra="fromType == 'work' ? '(00:00-24:00)' : ''">
                </HeadTitle>
            </a-col>
            <a-col :span="24">
                <div class="showNumInfo" :class="fromType" v-if="['work', 'rewards', 'statistics'].includes(fromType)">
                    <a-row v-for="(item, index) in list" :key="item.name + '' + index" style="" :gutter="[8, 5]">
                        <!-- <a-col class="numInfoWrap" :span="2"></a-col> -->
                        <a-col class="numInfoWrap" :span="24">
                            <div class="showNumInfoItem">
                                <div class="doc"></div>
                                <a-tooltip :title="item.name">
                                    <div class="name">{{ item.name }}</div>
                                </a-tooltip>
                                <div class="progress">
                                    <a-progress :stroke-color="{
                                        '0%': '#0746A3',
                                        '100%': '#57CDFF',
                                    }" :percent="Number(item.num)" status="active" :showInfo="fromType == 'rewards'"
                                        :format="percent => `${percent}`" />
                                    <!--  :format="percent => `${percent}${fromType == 'rewards' ? '元' : ''}`"  -->
                                </div>
                                <div class="number">
                                    <ZSCountTo :value="fromType == 'rewards' ? item.price : item.num"></ZSCountTo>
                                    <span v-if="fromType == 'rewards'">元</span>
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                </div>
                <div :class="fromType" v-else-if="fromType == 'statistics'">
                    <!-- ...resData.groupRiskOperationTrend.setting -->
                    <Echarts type="category" :setting="{ label: false, }" :data="dataList">
                    </Echarts>
                </div>
                <div :class="fromType" v-else-if="fromType == 'process'">
                    <ZSTable :newRowData="newObj['hiddenflow']" scroolHeight="19vh" columnsName="hiddenFlow"
                        :data="list" :isAutoPlay="true" :onRefresh="onRefresh">
                    </ZSTable>
                </div>
                <div :class="fromType" v-else-if="fromType == 'analysis'">
                    <a-row :gutter="[0, 7]">
                        <a-col :span="6" v-for="(item, index) in list" :key="item.name + '' + index" class="">
                            <div class="boxItemWrap" :class="index > 3 ? 'mTop' : ''">
                                <BoxRight>
                                    <div class="itemWrap">
                                        <div class="itemLeft">
                                            <div class="itemLeftIcon" :class="`itemIcon${index}`"></div>
                                        </div>
                                        <div class="itemRight">
                                            <div class="numberWrap">
                                                <span class="number">
                                                    {{ NumberFormatter(item.num) }}
                                                </span>
                                                <span style="font-size: 10.44px">次</span>
                                            </div>
                                            <div class="name">{{ item.name }}</div>
                                        </div>
                                    </div>
                                </BoxRight>
                            </div>
                        </a-col>
                    </a-row>
                </div>
            </a-col>
        </a-row>
    </div>
</template>

<script>

import HeadTitle from "./components/headTitle";
// 数字翻页效果
import ZSCountTo from "./components/ZSCountTo/ZSCountTo";
import Echarts from "./components/Echarts/Echarts";
import ZSTable from "./components/ZSTable/ZSTable";
import BoxRight from "./components/ZSBoxItem/BoxRight";
import { statiDataTitle } from './js/data'

export default {
    name: 'Ledger',
    components: {
        HeadTitle,
        ZSCountTo,
        Echarts,
        ZSTable,
        BoxRight,
    },
    props: {
        fromType: {
            type: String,
        }
    },
    data() {
        return {
            statiDataTitle,
            type: '0',
            list: [],
            loading: false,
            dataList: [],
            newObj: {
                hiddenflow: {},
                raletime: {},
            },
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        onRefresh() {
            this.getList();
        },
        getList(aParams) {
            let params = {
                type: this.type,
                ...aParams,
            }
            let urlStr = `${this.statiDataTitle[this.fromType].url}`;
            if (!urlStr) {
                return
            }
            this.loading = true;
            this.getAxios(this[`$${urlStr}`], params)
                .then((res) => {
                    if (res.code == 200) {
                        this.list = res.data;
                    }
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        selectChange(v) {
            this.type = v.target.value;
            this.getList({ type: v.target.value });
        },
        // 计算进度条的值
        progress(val) {
            let res = 0;
            if (val != 0) {
                let allNum;
                let arr = this.resData.groupRiskOperation;
                arr = arr.map((val) => Number(val.num));
                allNum = arr.reduce((acc, curr) => acc + curr, 0);
                res = Math.round((val / allNum) * 100);
            }
            return res;
        },
        NumberFormatter(s) {
            return Number(s);
            // 去掉千分符
            return Number(s).toLocaleString();
        },
    },
    computed: {

    },
    created() {
        // 左上角和右上角
        this.$bus.$on("onRefresh", this.onRefresh);
    },
    watch: {
        fromType: {
            handler(nVal, oVal) {
                if (nVal == 'any') {
                    // this.list = [
                    //     {
                    //         "id": "",
                    //         "name": "隐患排查",
                    //         "num": 0,
                    //         "price": ""
                    //     },
                    //     {
                    //         "id": "",
                    //         "name": "散货中心",
                    //         "num": 0,
                    //         "price": ""
                    //     },
                    //     {
                    //         "id": "",
                    //         "name": "场站中心",
                    //         "num": 0,
                    //         "price": ""
                    //     },
                    //     {
                    //         "id": "",
                    //         "name": "陆海矿业",
                    //         "num": 0,
                    //         "price": ""
                    //     },
                    //     {
                    //         "id": "",
                    //         "name": "集发远达",
                    //         "num": 0,
                    //         "price": ""
                    //     },
                    //     {
                    //         "id": "",
                    //         "name": "多式联运",
                    //         "num": 0,
                    //         "price": ""
                    //     },
                    //     {
                    //         "id": "",
                    //         "name": "产融产业",
                    //         "num": 0,
                    //         "price": ""
                    //     },
                    //     {
                    //         "id": "",
                    //         "name": "临港物流",
                    //         "num": 0,
                    //         "price": ""
                    //     }
                    // ]
                }
            },
            deep: true,
            immediate: true,
        }
    },
    destroyed() {
        this.$bus.$off("onRefresh");
    },

}
</script>

<style lang="less" scoped>
.leftBottomItem {
    position: relative;

    ::v-deep {
        .extra {
            display: none;
        }

        .ant-spin-blur {
            background: rgba(0, 0, 0, 0.1);
            opacity: 1;
        }
    }

    .selectClass {
        position: absolute;
        right: 1vw;
        z-index: 99;
        top: 2px;

        ::v-deep {
            .ant-select-selection {
                background: transparent;
                color: #ffffff;
                border: none;

                .ant-select-arrow {
                    color: #ffffff;
                }
            }


            .ant-radio-button-wrapper {
                background-color: transparent;
                color: #ffffff;
            }

            .ant-radio-button-wrapper-checked {
                background-color: #1890ff;
            }
        }
    }

    .headTitle {
        height: 4vh;
        width: 100%;
    }

    .showNumInfo {
        height: calc(25.5vh);
        overflow-y: auto;
        overflow-x: hidden;

    }

    .work {
        height: calc(21vh);
    }

    .rewards {
        height: calc(29.5vh);

        ::v-deep {
            .ant-progress-text {
                color: #00e0ff;
            }
        }
    }

    .numInfoWrap {
        .showNumInfoItem {
            // border: 1px solid #567187;
            background: rgba(86, 113, 135, 0.1);
            height: 3.5vh;
            display: flex;
            cursor: default;
            color: red;

            .doc {
                width: 0.3vw;
                height: 0.3vw;
                background-color: #0df6ff;
                margin: auto 1.5vw;
                border-radius: 50px;
                box-shadow: 0px 0px 4px 4px rgba(13, 246, 255, 0.36);
            }

            .name {
                color: #ffffff;
                width: 11.5vw;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin-right: 8px;
                display: inline-block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 3vh;
            }

            .progress {
                width: 8.5vw;
                display: flex;
                align-items: center;
            }

            .number {
                display: flex;
                width: 4vw;
                justify-content: center;
                align-items: center;
                color: rgba(0, 224, 255, 1);
                text-shadow: 0px 2px 2px rgba(0, 224, 255, 1);
            }
        }
    }

    .statistics {
        height: 21vh;
    }

    .process {
        height: 19vh;
        margin-top: 1vh;
    }

    .analysis {
        height: calc(20vh);
        margin-top: 10px;

        .boxItemWrap {
            height: calc(8.5vh);
            margin: 0.5vh 4px 0.5vh 4px;

            .itemWrap {
                display: flex;
                height: 100%;
                width: 100%;

                .itemLeft {
                    flex-shrink: 2;
                    height: 100%;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .itemLeftIcon {
                        width: 50px;
                        height: 50px;
                        background-size: 100% 100%;
                    }

                    .itemIcon0 {
                        background-image: url(~@/assets/images/screen/icon/iconFir.png);
                    }

                    .itemIcon1 {
                        background-image: url(~@/assets/images/screen/icon/iconSet.png);
                    }

                    .itemIcon2 {
                        background-image: url(~@/assets/images/screen/icon/iconDiao.png);
                    }

                    .itemIcon3 {
                        background-image: url(~@/assets/images/screen/icon/iconBox.png);
                    }

                    .itemIcon4 {
                        background-image: url(~@/assets/images/screen/icon/iconShip.png);
                    }

                    .itemIcon5 {
                        background-image: url(~@/assets/images/screen/icon/iconLower.png);
                    }

                    .itemIcon6 {
                        background-image: url(~@/assets/images/screen/icon/iconAddress.png);
                    }

                    .itemIcon7 {
                        background-image: url(~@/assets/images/screen/icon/iconOther.png);
                    }

                    // '动火作业': '~@/assets/images/screen/icon/iconFir.png',
                    // '检维修作业': '~@/assets/images/screen/icon/iconSet.png',
                    // '吊装作业': '~@/assets/images/screen/icon/iconDiao.png',
                    // '有限空间': '~@/assets/images/screen/icon/iconBox.png',
                    // '船只靠离泊': '~@/assets/images/screen/icon/iconShip.png',
                    // '下舱作业': '~@/assets/images/screen/icon/iconLower.png',
                    // '巡检巡查': '~@/assets/images/screen/icon/iconAddress.png',
                    // '其他作业': '~@/assets/images/screen/icon/iconOther.png'

                    @keyframes rotate {
                        from {
                            transform: rotateY(0deg);
                        }

                        to {
                            transform: rotateY(360deg);
                        }
                    }
                }

                .itemRight {
                    flex-shrink: 1.5;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    color: #ffffff;
                    align-items: start;
                    justify-content: center;

                    .numberWrap {
                        margin-bottom: 4px;

                        .number {
                            font-size: 18.88px;
                            font-weight: 700px;
                            color: rgba(0, 224, 255, 1);
                            margin-right: 4px;
                        }
                    }

                    .name {
                        font-size: 15px;
                        font-weight: 700;
                    }

                    .title {
                        font-size: 10.7px;
                        color: rgba(0, 224, 255, 1);
                    }
                }
            }
        }
    }

}

.mBtoom {
    margin-bottom: 2.5vh;
}

// 背景渐变
.backGradient {
    background: linear-gradient(to top, rgba(32, 63, 125, 0.7), rgba(32, 63, 125, 0));
}
</style>